<template>
  <div class="app-container">
    <el-card class="user-detail-card">
      <div slot="header" class="clearfix">
        <el-page-header @back="goBack" content="用户详情">
        </el-page-header>
      </div>

      <div v-loading="loading" class="user-detail-container">
        <el-row :gutter="20">
          <el-col :span="24" class="user-header">
            <div class="user-avatar">
              <img v-if="user.portrait" :src="user.portrait" alt="用户头像" class="avatar-img">
              <i v-else class="el-icon-user-solid default-avatar"></i>
            </div>
            <div class="user-basic-info">
              <div class="user-name">{{ user.name }}</div>
              <div class="user-uid">用户ID: {{ user.uid }}</div>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">注册邮箱:</span>
              <span class="detail-value">{{ user.email }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">用户状态:</span>
              <span class="detail-value">
                <el-tag v-if="user.status === 1" type="success">正常</el-tag>
                <el-tag v-else-if="user.status === -1" type="danger">删除</el-tag>
                <el-tag v-else>未知</el-tag>
              </span>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">注册时间:</span>
              <span class="detail-value">{{ formatDate(user.t) }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserDetail } from "@/api/user/user";

export default {
  name: "UserDetail",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 用户详情
      user: {}
    };
  },
  created() {
    const uid = this.$route.params.uid || this.$route.query.uid;
    this.getUserDetail(uid);
  },
  methods: {
    /** 获取用户详情 */
    getUserDetail(uid) {
      this.loading = true;
      getUserDetail(uid).then(response => {
        this.user = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    /** 格式化时间戳 */
    formatDate(timestamp) {
      if (!timestamp) return '';
      const date = new Date(parseInt(timestamp));
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    /** 返回 */
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.user-detail-card {
  margin: 20px;
}

.user-detail-container {
  padding: 20px;
}

.user-header {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.user-avatar {
  margin-right: 20px;
}

.avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.default-avatar {
  font-size: 80px;
  color: #ccc;
}

.user-basic-info {
  flex: 1;
}

.user-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.user-uid {
  font-size: 16px;
  color: #666;
}

.detail-row {
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.detail-label {
  width: 100px;
  font-weight: bold;
  color: #666;
}

.detail-value {
  flex: 1;
  font-size: 16px;
}
</style>